﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>CellEdit 单元格编辑 </title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link href="../demo.css" rel="stylesheet" type="text/css" />

	<script src="../../scripts/boot.js" type="text/javascript"></script>
	<script src="../../scripts/miniui/locale/en_US.js" type="text/javascript"></script>
	<script src="../../res/js/ColumnsMenu.js" type="text/javascript"></script>

</head>
<body>
<h1>CellEdit 单元格编辑</h1>

<mini-toolbar style="width:800px;border-bottom:0;padding:0px;">
	<table style="width:100%;">
		<tr>
			<td style="width:100%;">
				<!--<a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a>-->
				<!--<a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a>-->
				<span class="separator"></span>
				<a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>
			</td>
			<!--<td style="white-space:nowrap;">-->
				<!--<input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>-->
				<!--<a class="mini-button" onclick="search()">查询</a>-->
			<!--</td>-->
		</tr>
	</table>
</mini-toolbar>
<mini-datagrid id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
			   url="../../order" idField="id"
			   allowResize="true" pageSize="15"
			   allowCellEdit="true" allowCellSelect="true" multiSelect="true"
			   editNextOnEnterKey="true"  editNextRowCell="true"
			   showSortIcon="true"  _dataField="data111"
>
	<columns>
		<column type="indexcolumn">选10</column>
		<column type="checkcolumn"></column>
		<column id="id" name="id"  field="id" headerAlign="center" allowSort="true" width="50" >
			流水号

		</column>
		<column field="barberid" width="50" allowSort="true">理发师编号
		</column>
		<column field="customerid" width="50" allowSort="true">顾客编号
		</column>
		<column field="status" width="50" allowSort="true">状态
		</column>
		<column name="begintime" field="begintime" width="100" allowSort="true" dateFormat="yyyy-MM-dd HH:mm:ss">开始时间
		</column>
		<column name="endtime" field="endtime" width="100" allowSort="true" dateFormat="yyyy-MM-dd HH:mm:ss">结束时间
			<editor>
				<mini-datepicker style="width:100%;"showTime="true" id="endtime" name="endtime" field="endtime"></mini-datepicker>
			</editor>
		</column>
		<column field="styleid" width="50" headerAlign="center" allowSort="true">发型
			<!--<mini-textarea property="editor" style="width:200px;" minWidth="200" minHeight="50"></mini-textarea>-->
		</column>


	</columns>
</mini-datagrid>

<script type="text/javascript">

    var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];

    mini.parse();

    var grid = mini.get("datagrid1");

    grid.load();


    var menu = new ColumnsMenu(grid);

    //////////////////////////////////////////////////////

    function search() {
        var key = mini.get("key").getValue();
		console.log(key)
        grid.load({ key: key });
    }

    function onKeyEnter(e) {
        search();
    }

    function addRow() {
        var newRow = { name: "New Row" };
        grid.addRow(newRow, 0);

        grid.beginEditCell(newRow, "LoginName");
    }
    function removeRow() {
        var rows = grid.getSelecteds();
        if (rows.length > 0) {

            grid.removeRows(rows, true);
        }
    }


    function saveData() {
        // var id= document.getElementById("id");
        // var id= document.getElementById("id").value;
        // var id= mini.get("id").getValue();
        var menu= mini.get("datagrid1");
        var id=menu.data[0].id;
        // var o =menu.getData().id;
        // console.log(o)
        // // var id=menu.data[0].id;
        // // console.log(id)
        var date = mini.get("endtime");
        console.log(date); // 检查是否返回了正确的对象
        var endtime = date.viewDate;
        console.log(endtime); // 再次检查获取的值
        // 解析日期字符串为Date对象
		//
          // 将Date对象转换为ISO格式的字符串，这是JSON中日期和时间的常见表示方式
            var isoString = endtime.toISOString();
        console.log(isoString); // 再次检查获取的值

            // 将ISO格式的字符串转换为JSON对象（这里实际上只是将日期作为字符串包含在JSON中）
            var jsonData = {
                endtime: isoString,
				id:id
            };
        console.log(jsonData);
        // 将JSON对象转换为JSON字符串
            var jsonString = JSON.stringify(jsonData);

            console.log(jsonString); // 输出：{"date":"2024-04-26T09:14:34.000Z"}
		$.ajax({

            url: "../../order/update",
            type: 'post',
            contentType: 'application/json',//新
                data:jsonString,
            // data: JSON.stringify(o),
                success: function (text) {
                    alert(text);
                    // CloseWindow("save");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                    // CloseWindow();
                }
        })


    }


    grid.on("celleditenter", function (e) {
        var index = grid.indexOf(e.record);
        if (index == grid.getData().length - 1) {
            var row = {};
            grid.addRow(row);
        }
    });

    grid.on("beforeload", function (e) {
        if (grid.getChanges().length > 0) {
            if (confirm("有增删改的数据未保存，是否取消本次操作？")) {
                e.cancel = true;
            }
        }
    });


</script>

</body>
</html>